<template>
  <view class="card-list" v-for="item in dataList" :key="item.reformId">
    <view class="card-list-header">
      <wd-cell :title="'单号'+item.reformNo" title-width="420rpx" value="查看详情" is-link custom-class="card-list-cell"
               :to="`/pages/contractManage/changeDetail/index?reformId=${item.reformId}`"/>
    </view>
    <wd-cell title="状态" title-width="100px">
      <template #default>
        <wd-tag custom-class="space" type="primary" :color="colorList[item.reformState-1]"
                :bg-color="bgColorList[item.reformState-1]">
          {{ tagNameList[item.reformState - 1] }}
        </wd-tag>
      </template>
    </wd-cell>
    <wd-cell title="报价变更单费用合计" :value="item.quoteChangeAmount"/>
    <wd-cell title="赔偿金额" :value="item.customerCompensationAmount"/>
    <wd-cell title="发起时间" :value="item.submitTime"/>
    <wd-cell title-width="140rpx" title="变更内容">
      <template #default>
        <TextOverflow :lines="2" expandText="展开" foldHint="收起">{{ item.ownerVisibleContent }}</TextOverflow>
      </template>
    </wd-cell>
    <view class="card-list-container">
      <view class="amount-content">
        <view class="amount">￥0.00</view>
        <view>当前应付款</view>
      </view>
      <view class="amount-content">
        <view class="amount">￥0.00</view>
        <view>已付款</view>
      </view>
    </view>
    <!--    <view class="card-list-footer">-->
    <!--      <div style="display: flex">-->
    <!--        <div @click="handleGoto">去付款</div>-->
    <!--      </div>-->
    <!--    </view>-->
  </view>
  <wd-loadmore :state="state" @reload="getList" v-if="total>0"/>
  <wd-status-tip tip="这里暂时什么都没有哦" v-if="total<=0"
                 image="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/empty.png"/>
</template>

<script setup>
import {ref} from "vue"
import {onReachBottom} from '@dcloudio/uni-app'
import {listReform} from "@/api/contract";
import TextOverflow from "@/components/text-over-flow/text-over-flow.vue"

const dataList = ref([])
const page = ref(1)
const total = ref(0)
const state = ref("loading")
const colorList = ref(["#ff9900", "#ff9900", "#409EFF", "#14c85c", "#ff3333", "#606266", "#409EFF", "#ff9900", "#409EFF", "#ff3333", "#ff9900",])
const bgColorList = ref(["#fff0d9", "#fff0d9", "#D9EDFF", "#e3f9e9", "#ffc7c7", "#dcdfe6", "#D9EDFF", "#fff0d9", "#D9EDFF", "#ffc7c7", "#fff0d9",])
const tagNameList = ref(["待审核", "待开始", "进行中", "已完成", "未通过", "已作废", "审批中", "待发起客户确认", "客户确认中", "客户拒绝", "待付款"])
const handleGoto = () => {
  uni.navigateTo({url: "/pages/contractManage/payMoney/index"})
}

onReachBottom(() => {
  if (dataList.value.length < total.value) {
    page.value += 1
    getList()
  } else if (dataList.value.length === total.value) {
    state.value = 'finished'
  }
})

const getList = async () => {
  const {data} = await listReform({page: page.value})
  state.value = 'loading'
  total.value = data.total
  dataList.value = dataList.value.concat(data.list)
}
getList()
</script>
<style lang="scss">

</style>
<style lang="scss" scoped>
.card-list {
  background: #FFFFFF;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(134, 144, 156, 0.1);
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  overflow: hidden;
  margin-bottom: 20rpx;

  &-header {
    border-bottom: 2rpx solid #F5F7FA;
    padding-bottom: 24rpx;
    margin-bottom: 16rpx;
  }

  &-container {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 20rpx;

    .amount-content {
      width: 300rpx;
      height: 128rpx;
      background: #F6F8FA;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #86909C;

      .amount {
        color: #3D3D3D;
        margin-bottom: 10rpx;
      }
    }
  }

  &-footer {
    border-top: 2rpx solid #F5F7FA;
    padding: 24rpx;
    color: #007DFF;
    font-size: 28rpx;
    display: flex;
    justify-content: center;
    align-content: center;

    .divider-grey {
      width: 4rpx;
      height: 40rpx;
      background: #E1E6ED;
    }
  }
}

:deep(.wd-cell__body) {
  color: #86909C !important;

  :deep(.wd-cell__value) {
    color: #86909C !important;
  }
}
</style>